<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2025-01-19 19:21:04
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2025-02-21 19:16:24
 * @FilePath: /vue-element-admin/src/views/authorityManagement/orderSetting/orderSettingList/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container orderSetting">
    <div
      style="margin: 15px 0px; display: flex; justify-content: space-between"
    >
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkList"
        @change="handleCheckAllChange"
        >全选</el-checkbox
      >
      <el-button type="primary" size="small" @click="handleSave"
        >保存</el-button
      >
    </div>
    <el-checkbox-group
      v-model="checkedDatas"
      @change="handleCheckedCitiesChange"
    >
      <el-card class="box-card">
        <el-checkbox
          v-for="item in initialDatas"
          :label="item.id"
          :key="item.id"
          >{{ item.name }}</el-checkbox
        >
      </el-card>
    </el-checkbox-group>
  </div>
</template>

<script>
import {
  getListQuery,
  create,
  update,
  deleteData,
} from "@/api/orderSettingList";

export default {
  data() {
    return {
      listLoading: false,
      isIndeterminate: true,
      checkList: ["选中且禁用", "复选框 A"],
      initialDatas: [
        { name: "客户渠道", id: 101, status: 1 },
        { name: "服务方案", id: 102, status: 1 },
        { name: "服务金额", id: 103, status: 1 },
        { name: "殡葬师", id: 105, status: 1 },
        { name: "宝贝姓名", id: 106, status: 1 },
        { name: "宝贝年龄", id: 107, status: 1 },
        { name: "宝贝离世原因", id: 108, status: 1 },
        { name: "宝贝品种", id: 109, status: 1 },
        { name: "宝贝性别", id: 110, status: 1 },
        { name: "宝贝体重", id: 111, status: 1 },
        { name: "骨灰盅", id: 112, status: 1 },
        { name: "产品", id: 113, status: 1 },
        { name: "是否到店", id: 114, status: 1 },
        { name: "客户地址", id: 115, status: 1 },
        { name: "客户姓名", id: 116, status: 1 },
        { name: "客户电话", id: 117, status: 1 },
        { name: "收款方式", id: 118, status: 1 },
        { name: "优惠", id: 119, status: 1 },
        { name: "增加车费", id: 120, status: 1 },
        { name: "总金额", id: 121, status: 1 },
        { name: "备注", id: 122, status: 1 },
      ],
      datas: [],
      checkedDatas: [
        // { field: 101, status: 1 },
        // { field: 102, status: 0 },
      ], //0:取消;1:使用
    };
  },
  mounted() {
    this.getCheckboxList();
  },
  methods: {
    async handleSave() {
      // [{field:1,status:1},{field:2,status:1}]
      const submitDatas = this.checkedDatas.map((id) => {
        const obj = {
          field: id,
          status: 1,
        };
        return obj;
      });
      console.log(9999, submitDatas);

      this.listLoading = true;
      await create(submitDatas).then((response) => {
       
        this.listLoading = false;
      });
    this.getCheckboxList();

    },
    async getCheckboxList() {
      // const res = [
      //   { field: 114, status: 1 },
      //   { field: 102, status: 0 },
      // ];

      // this.checkedDatas = res.map((item) => {
      //   if (item.status == 1) {
      //     return item.field;
      //   }
      // });
      this.listLoading = true;
      await getListQuery().then((response) => {
        this.checkedDatas = response.data.map((item)=>{
          if(item.status==1){
            return item.field
          }
          
        });
        console.log("🍓",this.checkedDatas)
        this.listLoading = false;
      });
    },

    handleCheckAllChange(val) {
      const allId = this.initialDatas.map((item) => item.id);
      this.checkedDatas = val ? allId : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.initialDatas.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.initialDatas.length;
      this.checkedDatas = value;
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
.orderSetting {
  .el-checkbox {
    width: 100px;
  }
}
</style>